<template>
  <a-modal
    :title="title"
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
    :width="width"
    :style="{ height: height + 'px' }"
    :zIndex="zIndex"
    :footer="footer"
  >
    <!-- <p>这里是弹窗的内容。</p> -->
    <!-- 插槽，用于传递自定义内容 -->
    <slot></slot>
  </a-modal>
</template>

<script>
import {Modal} from 'ant-design-vue'

export default {
  name: "MyModal",
  props: {
    // 可以通过props接收外部传入的值，比如标题、内容等
    // 例如：props: ['title', 'content']，然后在模板中使用{{ title }}和{{ content }}
    visible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "自定义弹窗",
    },
    height: {
      type: Number,
      default: 500,
    },
    width: {
      type: Number,
      default: 900,
    },
    ...Modal.props
  },
  methods: {
    handleOk() {
      this.$emit("ok");
      this.handleCancel(); // 可以选择关闭弹窗
      // 可以在这里添加点击确认按钮时的其他逻辑
    },
    handleCancel() {
      this.$emit("update:visible", false);
      // 可以在这里添加点击取消按钮时的其他逻辑
    },
  },
};
</script>

<style scoped lang="less">
</style>
